<template>
  <view class="top-problen-box">
    <view class="public-content">
      <top-nav-bar background-color="transparent" />
      <view class="public-title">
        {{ $t('faq.title') }}
      </view>
      <view class="public-desc">
        {{ $t('question.title2') }}
      </view>

      <uni-collapse>
        <uni-collapse-item
          v-for="(item, index) in articleList"
          :key="index">
          <template #title>
            <view class="coll-title">
              <text class="name">Q</text>
              <text class="name">{{ item.articleTitle }} </text>
            </view>
          </template>
          <view style="padding: 20rpx 0;">
            <view class="content">
              <view
                v-if="item.articleImg"
                style="width: 100%; border-radius: 30rpx; overflow: hidden; margin-bottom: 26rpx">
                <image
                  :src="item.articleImg"
                  lazy-load
                  mode="widthFix"
                  style="width: 100%; height: 100%">
                </image>
              </view>
              <view v-html="item.articleDetails"></view>
            </view>
          </view>
        </uni-collapse-item>
      </uni-collapse>

      <!-- <view class="cark-list">
        <view
          v-for="item in articleList"
          :key="item.articleId"
          class="cark-box"
          @click="onGo(item)">
          <view class="left-box">
            <view class="line">Q</view>
            <view class="name">
              <text>{{ item.articleTitle }}</text>
              <text>{{ item.articleDescription }}</text>
            </view>
          </view>
          <uni-icons
            type="forward"
            size="20"></uni-icons>
        </view>
      </view> -->
    </view>
    <foot-page />
  </view>
</template>

<script setup>
  import { useArticle } from '@/hooks'

  const { articleList } = useArticle('FAQ')

  const onGo = (item) => {
    uni.navigateTo({
      url: `/pages/details-index/details-index?articleId=${item.articleId}`
    })
  }
</script>

<style lang="scss" scoped>
  .top-problen-box {
    background: url('/static/bg/bg-top.png') no-repeat top center;
    background-size: 100%;
  }
  .public-title {
    margin: 40rpx 0 0;
  }
  .public-desc {
    margin: 20rpx 0;
  }

  .coll-title {
    padding: 46rpx 0;

    .name {
      font-size: 30rpx;
      font-weight: 700;
      color: #2764ff;

      &:last-child {
        color: #000618;
        margin-left: 20rpx;
      }
    }
  }

  .content {
    background: #f7f9fd;
    font-size: 28rpx;
  }

  .cark-list {
    width: 100%;
    .cark-box + .cark-box {
      border-top: 2rpx solid #e2ecf8;
    }
    .cark-box {
      padding: 30rpx 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left-box {
        width: 90%;
        display: flex;
        .line {
          line-height: 34rpx;
          margin-right: 16rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 32rpx;
          color: #3462fe;
          text-align: center;
          font-style: normal;
          text-transform: none;
        }
        .name {
          display: flex;
          flex-direction: column;
          text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 24rpx;
            color: #999999;
            text-align: left;
            font-style: normal;
            text-transform: none;
            &:first-child {
              font-size: 28rpx;
              color: #333333;
              margin-bottom: 10rpx;
            }
          }
        }
      }
    }
  }
</style>
